<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Postermanagement">海报管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <el-upload
        name="file"
        action="/api/upload1"
        class="upload-demo"
        drag
        multiple
        style="width: 97%;margin-left: 20px;margin-top: 20px;"
        @change="chuan()"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">
          <p>点击或者将文件拖拽到此处</p>
          <p>文件上传到0SS</p>
        </div>
      </el-upload>
      <div style="width: 97%;background: #fff;height: 100px;margin: 20px;">
        <p
          style="display: flex;align-items: center;padding-top: 20px;margin-left: 30px;padding-right: 50px"
        >
          名称:
          <el-input
            v-model="input"
            placeholder="请输入用户标题"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>
        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>
      <div
        style="display: flex;flex-wrap: wrap;background: #fff;width: 97%;margin-left: 20px;height: auto;"
      >
        <div class="b" v-for="v in list">
          <img :src="v.img" lazy />
          <div style="border: 1px solid #ccc;border-top: none;">
            <p style="padding: 10px 0px;">{{ v.username }}</p>
            <p style="padding-bottom: 10px">{{ v.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
 <script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { haiList, haisou,bao } from '../../api'
export default defineComponent({
  setup() {
    const list = ref()
    const input = ref('')
    onMounted(() => {
      haiList().then(res => {
        console.log(res);
        list.value = res.data.data
      })
    })
    const sou = () => {
      haisou({ input }).then(res => {
        console.log(res);
        list.value = res.data.data
      })
    }
    const chong=()=>{
      input.value=''
      haiList().then(res => {
        console.log(res);
        list.value = res.data.data
      })
    }
    const chuan=()=>{
      //  bao().then(res=>{
      //    console.log(res);
         
      //  })
    }
    return {
      list,
      input,
      sou,
      chong,
      chuan
    }
  }
})
</script>
 
 <style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}
.b {
  width: 260px;
  height: 260px;
  margin: 0 30px;
  padding-top: 30px;
  margin-top: 20px;
}
.b img {
  width: 260px;
  height: 138px;
}
</style>
 